<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jqueryDay02.css">
<title>Jquery表单验证(正则)</title>

</head>
<body>
	<!-- 
	form表单的属性
	action属性：form表单提交的路径
	method属性：form提交的方式
	   method="get"（默认） 参数会通过地址栏传递过去
	   method="post"       参数通过请求头文件传递过去
	 -->
	<form action="aa.html" method="get" id="myform">
		<div class="row">
			<div>
				<span class="lableSpan">
					<span class="red">*</span>
					<label>用户名</label>
				</span>
						
				<input type="text" name="name" id="name" class="textStyle">
				<span id="nameMes"></span>
			</div>
			<div class="messageDiv">6-16位，数字，字母，下划线组合，首字符只能是字母</div>
		</div>
		
		<div class="row">
			<div>
				<span class="lableSpan">
					<span class="red">*</span>
					<label>密码</label>
				</span>
						
				<input type="text" name="password" id="password" class="textStyle">
				<span id="passwordMes"></span>
			</div>
			<div class="messageDiv">6-10位，数字，字母组合，首字符只能是数字</div>
		</div>
		
		<div class="row">
			<div>
				<span class="lableSpan">
					<span class="red">*</span>
					<label>确认密码</label>
				</span>
						
				<input type="text" id="passwordC" class="textStyle">
				<span id="passwordCMes"></span>
			</div>
			<div class="messageDiv">必须和确认密码一样</div>
		</div>
		
		<div class="row">
			<div>
				<span class="lableSpan">
					<span class="red">*</span>
					<label>身份证号码</label>
				</span>
						
				<input type="text" name="id" id="id" class="textStyle">
			</div>
			<div class="messageDiv"></div>
		</div>
		
		<div class="row">
			<div>
				<span class="lableSpan">
					<span class="red">*</span>
					<label>出生日期</label>
				</span>
						
				<input type="text" name="birthday" 
				id="birthday" class="textStyle" readonly>
			</div>
			<div class="messageDiv"></div>
		</div>
		
		<div class="row">
			<div>
				<span class="lableSpan">
					<span class="red">*</span>
					<label>电话号码</label>
				</span>
						
				<input type="text" name="tel" id="tel" class="textStyle">
			</div>
			<div class="messageDiv"></div>
		</div>

		<div class="row">
			<div>
				<span class="lableSpan">
					<span class="red">*</span>
					<label>性别</label>
				</span>
				
				<label class="labelSpan2">
					<span>男</span>
					<input type="radio" name="sex" value="男" checked>
				</label>
				
				<label class="labelSpan2">
					<span>女</span>
					<input type="radio" name="sex" value="女">
				</label>
			</div>
			<div class="messageDiv"></div>
		</div>
		
		<div class="row">
			<div>
				<span class="lableSpan">
					<span class="red">*</span>
					<label>爱好</label>
				</span>
				
				<label class="labelSpan2">
					<span>看书</span>
					<input type="checkbox" name="hobby" value="书">
				</label>
				
				<label class="labelSpan2">
					<span>美食</span>
					<input type="checkbox" name="hobby" value="美食">
				</label>
				
				<label class="labelSpan2">
					<span>运动</span>
					<input type="checkbox" name="hobby" value="运动">
				</label>
			</div>
			<div class="messageDiv"></div>
		</div>
		
		<div class="row">
			<div>
				<span class="binarySpan">
					<input type="button" id="subBut" class="btn" value="提交">
					<!-- <button>提交</button> -->
				</span>
				<span class="binarySpan">
					<input type="reset" class="btn" value="重置">
				</span>
			</div>
			<div class="messageDiv"></div>
		</div>
		
	</form>

<script type="text/javascript" src="jquery-1.11.3.js"></script>	
<script type="text/javascript" src="jqueryDay02.js"></script>
</body>
</html>